<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
    <div class="container mx-auto px-4 py-8">
      <!-- 页面标题 -->
      <div class="mb-8 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-yellow-600 to-orange-600 rounded-2xl mb-4 shadow-lg">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
          </svg>
        </div>
        <h1 class="text-4xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent mb-2">积分中心</h1>
        <p class="text-gray-600 text-lg">赚取积分，兑换好礼</p>
      </div>

      <!-- 用户积分概览 -->
      <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-8 mb-8 border border-white/20">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
          <div class="text-center">
            <div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
              </svg>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-2">{{ userPoints.total_points }}</div>
            <div class="text-sm text-gray-600">总积分</div>
          </div>
          
          <div class="text-center">
            <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-2">{{ userPoints.available_points }}</div>
            <div class="text-sm text-gray-600">可用积分</div>
          </div>
          
          <div class="text-center">
            <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
              </svg>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-2">{{ userLevel.level }}</div>
            <div class="text-sm text-gray-600">{{ userLevel.level_name }}</div>
          </div>
          
          <div class="text-center">
            <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
              </svg>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-2">{{ userLevel.progress_percentage }}%</div>
            <div class="text-sm text-gray-600">升级进度</div>
          </div>
        </div>
        
        <!-- 等级进度条 -->
        <div class="mt-6">
          <div class="flex justify-between items-center mb-2">
            <span class="text-sm font-medium text-gray-700">距离下一等级</span>
            <span class="text-sm text-gray-500">{{ userLevel.current_points }} / {{ userLevel.next_level_points }}</span>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-3">
            <div 
              class="bg-gradient-to-r from-blue-500 to-purple-500 h-3 rounded-full transition-all duration-500"
              :style="{ width: userLevel.progress_percentage + '%' }"
            ></div>
          </div>
        </div>
      </div>

      <!-- 标签页导航 -->
      <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-white/20 mb-8">
        <div class="border-b border-gray-200/50">
          <nav class="flex space-x-8 px-6" aria-label="Tabs">
            <button
              v-for="tab in tabs"
              :key="tab.id"
              @click="activeTab = tab.id"
              :class="[
                'py-4 px-1 border-b-2 font-medium text-sm transition-all duration-200',
                activeTab === tab.id
                  ? 'border-yellow-500 text-yellow-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              ]"
            >
              {{ tab.name }}
            </button>
          </nav>
        </div>

        <div class="p-6">
          <!-- 积分记录 -->
          <div v-if="activeTab === 'history'">
            <div class="flex justify-between items-center mb-6">
              <h3 class="text-lg font-semibold text-gray-900">积分记录</h3>
              <div class="flex space-x-3">
                <select
                  v-model="historyFilter"
                  @change="loadPointsHistory"
                  class="bg-white/80 backdrop-blur-sm text-sm rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-yellow-500/30 border border-gray-200/50"
                >
                  <option value="all">所有类型</option>
                  <option value="earn">获得积分</option>
                  <option value="spend">消费积分</option>
                </select>
                <button
                  @click="loadPointsHistory"
                  class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
                >
                  刷新
                </button>
              </div>
            </div>

            <!-- 加载状态 -->
            <div v-if="historyLoading" class="flex justify-center items-center py-12">
              <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-yellow-500"></div>
              <span class="ml-3 text-gray-600">加载中...</span>
            </div>

            <!-- 积分记录列表 -->
            <div v-else-if="pointsHistory.length > 0" class="space-y-4">
              <div
                v-for="record in pointsHistory"
                :key="record.id"
                class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl hover:shadow-md transition-all duration-200"
              >
                <div class="flex items-center space-x-4">
                  <div
                    :class="[
                      'w-10 h-10 rounded-full flex items-center justify-center',
                      record.points > 0 ? 'bg-green-100' : 'bg-red-100'
                    ]"
                  >
                    <svg
                      :class="[
                        'w-5 h-5',
                        record.points > 0 ? 'text-green-600' : 'text-red-600'
                      ]"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        v-if="record.points > 0"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M12 6v6m0 0v6m0-6h6m-6 0H6"
                      ></path>
                      <path
                        v-else
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M18 12H6"
                      ></path>
                    </svg>
                  </div>
                  <div>
                    <div class="font-semibold text-gray-900">{{ record.description }}</div>
                    <div class="text-sm text-gray-500">{{ formatTime(record.created_at) }}</div>
                  </div>
                </div>
                <div
                  :class="[
                    'text-lg font-bold',
                    record.points > 0 ? 'text-green-600' : 'text-red-600'
                  ]"
                >
                  {{ record.points > 0 ? '+' : '' }}{{ record.points }}
                </div>
              </div>
            </div>

            <!-- 空状态 -->
            <div v-else class="text-center py-12">
              <div class="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                </svg>
              </div>
              <h3 class="text-lg font-medium text-gray-900 mb-2">暂无积分记录</h3>
              <p class="text-gray-500">开始做题和分享内容来赚取积分吧</p>
            </div>
          </div>

          <!-- 积分商城 -->
          <div v-if="activeTab === 'shop'">
            <div class="flex justify-between items-center mb-6">
              <h3 class="text-lg font-semibold text-gray-900">积分商城</h3>
              <div class="flex space-x-3">
                <select
                  v-model="shopFilter"
                  @change="loadRedeemableItems"
                  class="bg-white/80 backdrop-blur-sm text-sm rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-yellow-500/30 border border-gray-200/50"
                >
                  <option value="all">所有分类</option>
                  <option value="digital">数字商品</option>
                  <option value="physical">实物商品</option>
                  <option value="service">服务</option>
                </select>
                <button
                  @click="loadRedeemableItems"
                  class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
                >
                  刷新
                </button>
              </div>
            </div>

            <!-- 加载状态 -->
            <div v-if="shopLoading" class="flex justify-center items-center py-12">
              <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-yellow-500"></div>
              <span class="ml-3 text-gray-600">加载中...</span>
            </div>

            <!-- 商品列表 -->
            <div v-else-if="redeemableItems.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <div
                v-for="item in redeemableItems"
                :key="item.id"
                class="bg-white/90 backdrop-blur-sm rounded-xl border border-gray-200/50 shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden"
              >
                <div class="aspect-w-16 aspect-h-9 bg-gray-100">
                  <img
                    v-if="item.image_url"
                    :src="item.image_url"
                    :alt="item.name"
                    class="w-full h-48 object-cover"
                  />
                  <div
                    v-else
                    class="w-full h-48 bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center"
                  >
                    <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                  </div>
                </div>
                <div class="p-4">
                  <h4 class="font-semibold text-gray-900 mb-2">{{ item.name }}</h4>
                  <p class="text-sm text-gray-600 mb-3">{{ item.description }}</p>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-2">
                      <svg class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                      </svg>
                      <span class="text-lg font-bold text-yellow-600">{{ item.points_cost }}</span>
                    </div>
                    <button
                      @click="redeemItem(item)"
                      :disabled="!item.is_available || userPoints.available_points < item.points_cost"
                      :class="[
                        'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
                        item.is_available && userPoints.available_points >= item.points_cost
                          ? 'bg-yellow-500 text-white hover:bg-yellow-600'
                          : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                      ]"
                    >
                      {{ item.is_available ? '兑换' : '缺货' }}
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 空状态 -->
            <div v-else class="text-center py-12">
              <div class="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                </svg>
              </div>
              <h3 class="text-lg font-medium text-gray-900 mb-2">暂无商品</h3>
              <p class="text-gray-500">商城正在准备中，敬请期待</p>
            </div>
          </div>

          <!-- 积分规则 -->
          <div v-if="activeTab === 'rules'">
            <div class="flex justify-between items-center mb-6">
              <h3 class="text-lg font-semibold text-gray-900">积分规则</h3>
              <button
                @click="loadPointsRules"
                class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
              >
                刷新
              </button>
            </div>

            <!-- 加载状态 -->
            <div v-if="rulesLoading" class="flex justify-center items-center py-12">
              <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-yellow-500"></div>
              <span class="ml-3 text-gray-600">加载中...</span>
            </div>

            <!-- 积分规则说明 -->
            <div class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
              <div class="flex items-start">
                <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <div>
                  <h4 class="text-sm font-medium text-blue-900 mb-1">积分规则说明</h4>
                  <p class="text-sm text-blue-700">每种行为都有每日积分获取上限，积分可用于兑换奖励和提升等级。积分规则可能会根据系统需要调整。</p>
                </div>
              </div>
            </div>

            <!-- 积分规则列表 -->
            <div class="space-y-4">
              <!-- 每日登录奖励 -->
              <div class="p-6 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border border-green-200">
                <div class="flex items-center justify-between">
                  <div class="flex-1">
                    <div class="flex items-center mb-2">
                      <svg class="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                      </svg>
                      <h4 class="font-semibold text-gray-900">每日登录奖励</h4>
                    </div>
                    <p class="text-sm text-gray-600">每日首次登录获得积分奖励</p>
                    <p class="text-xs text-gray-500 mt-1">每日限制：1次</p>
                  </div>
                  <div class="flex items-center space-x-3">
                    <span class="text-2xl font-bold text-green-600">+10</span>
                    <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      有效
                    </span>
                  </div>
                </div>
              </div>

              <!-- 解题成功奖励 -->
              <div class="p-6 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-xl border border-blue-200">
                <div class="flex items-center justify-between">
                  <div class="flex-1">
                    <div class="flex items-center mb-2">
                      <svg class="w-5 h-5 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
                      </svg>
                      <h4 class="font-semibold text-gray-900">解题成功奖励</h4>
                    </div>
                    <p class="text-sm text-gray-600">成功解答题目获得积分奖励</p>
                    <p class="text-xs text-gray-500 mt-1">每日限制：5题 | 简单×3，中等×5，困难×10</p>
                  </div>
                  <div class="flex items-center space-x-3">
                    <span class="text-2xl font-bold text-blue-600">+20</span>
                    <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      有效
                    </span>
                  </div>
                </div>
              </div>

              <!-- 创建题目奖励 -->
              <div class="p-6 bg-gradient-to-r from-purple-50 to-violet-50 rounded-xl border border-purple-200">
                <div class="flex items-center justify-between">
                  <div class="flex-1">
                    <div class="flex items-center mb-2">
                      <svg class="w-5 h-5 text-purple-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                      </svg>
                      <h4 class="font-semibold text-gray-900">创建题目奖励</h4>
                    </div>
                    <p class="text-sm text-gray-600">教师和管理员创建题目获得积分奖励</p>
                    <p class="text-xs text-gray-500 mt-1">每日限制：10题</p>
                  </div>
                  <div class="flex items-center space-x-3">
                    <span class="text-2xl font-bold text-purple-600">+100</span>
                    <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      有效
                    </span>
                  </div>
                </div>
              </div>

              <!-- 分享项目奖励 -->
              <div class="p-6 bg-gradient-to-r from-orange-50 to-amber-50 rounded-xl border border-orange-200">
                <div class="flex items-center justify-between">
                  <div class="flex-1">
                    <div class="flex items-center mb-2">
                      <svg class="w-5 h-5 text-orange-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                      </svg>
                      <h4 class="font-semibold text-gray-900">分享项目奖励</h4>
                    </div>
                    <p class="text-sm text-gray-600">分享项目到平台获得积分奖励</p>
                    <p class="text-xs text-gray-500 mt-1">每日限制：5个</p>
                  </div>
                  <div class="flex items-center space-x-3">
                    <span class="text-2xl font-bold text-orange-600">+150</span>
                    <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      有效
                    </span>
                  </div>
                </div>
              </div>

              <!-- 题解被点赞奖励 -->
              <div class="p-6 bg-gradient-to-r from-pink-50 to-rose-50 rounded-xl border border-pink-200">
                <div class="flex items-center justify-between">
                  <div class="flex-1">
                    <div class="flex items-center mb-2">
                      <svg class="w-5 h-5 text-pink-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                      </svg>
                      <h4 class="font-semibold text-gray-900">题解被点赞奖励</h4>
                    </div>
                    <p class="text-sm text-gray-600">题解被其他用户点赞获得积分奖励</p>
                    <p class="text-xs text-gray-500 mt-1">每日限制：100次</p>
                  </div>
                  <div class="flex items-center space-x-3">
                    <span class="text-2xl font-bold text-pink-600">+5</span>
                    <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      有效
                    </span>
                  </div>
                </div>
              </div>

              <!-- 竞赛获胜奖励 -->
              <div class="p-6 bg-gradient-to-r from-yellow-50 to-amber-50 rounded-xl border border-yellow-200">
                <div class="flex items-center justify-between">
                  <div class="flex-1">
                    <div class="flex items-center mb-2">
                      <svg class="w-5 h-5 text-yellow-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
                      </svg>
                      <h4 class="font-semibold text-gray-900">竞赛获胜奖励</h4>
                    </div>
                    <p class="text-sm text-gray-600">在竞赛中获胜获得积分奖励</p>
                    <p class="text-xs text-gray-500 mt-1">每日限制：3次 | 第1名×3，前3名×2，前10名×1</p>
                  </div>
                  <div class="flex items-center space-x-3">
                    <span class="text-2xl font-bold text-yellow-600">+500</span>
                    <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      有效
                    </span>
                  </div>
                </div>
              </div>

              <!-- 邀请用户奖励 -->
              <div class="p-6 bg-gradient-to-r from-indigo-50 to-blue-50 rounded-xl border border-indigo-200">
                <div class="flex items-center justify-between">
                  <div class="flex-1">
                    <div class="flex items-center mb-2">
                      <svg class="w-5 h-5 text-indigo-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
                      </svg>
                      <h4 class="font-semibold text-gray-900">邀请用户奖励</h4>
                    </div>
                    <p class="text-sm text-gray-600">成功邀请新用户注册获得积分奖励</p>
                    <p class="text-xs text-gray-500 mt-1">每日限制：10人</p>
                  </div>
                  <div class="flex items-center space-x-3">
                    <span class="text-2xl font-bold text-indigo-600">+200</span>
                    <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      有效
                    </span>
                  </div>
                </div>
              </div>

              <!-- 系统奖励 -->
              <div class="p-6 bg-gradient-to-r from-gray-50 to-slate-50 rounded-xl border border-gray-200">
                <div class="flex items-center justify-between">
                  <div class="flex-1">
                    <div class="flex items-center mb-2">
                      <svg class="w-5 h-5 text-gray-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                      </svg>
                      <h4 class="font-semibold text-gray-900">系统奖励</h4>
                    </div>
                    <p class="text-sm text-gray-600">系统给予的额外积分奖励</p>
                    <p class="text-xs text-gray-500 mt-1">每日限制：5次</p>
                  </div>
                  <div class="flex items-center space-x-3">
                    <span class="text-2xl font-bold text-gray-600">+50</span>
                    <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      有效
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 等级系统说明 -->
            <div class="mt-8">
              <h4 class="text-lg font-semibold text-gray-900 mb-4">等级系统</h4>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <!-- 新手 -->
                <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-900">新手</span>
                    <span class="text-xs text-gray-500">0-99分</span>
                  </div>
                  <p class="text-xs text-gray-600">基础功能</p>
                </div>

                <!-- 入门 -->
                <div class="p-4 bg-green-50 rounded-lg border border-green-200">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-900">入门</span>
                    <span class="text-xs text-gray-500">100-499分</span>
                  </div>
                  <p class="text-xs text-gray-600">优先支持</p>
                </div>

                <!-- 进阶 -->
                <div class="p-4 bg-blue-50 rounded-lg border border-blue-200">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-900">进阶</span>
                    <span class="text-xs text-gray-500">500-999分</span>
                  </div>
                  <p class="text-xs text-gray-600">专属标识</p>
                </div>

                <!-- 熟练 -->
                <div class="p-4 bg-purple-50 rounded-lg border border-purple-200">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-900">熟练</span>
                    <span class="text-xs text-gray-500">1000-1999分</span>
                  </div>
                  <p class="text-xs text-gray-600">专属标识</p>
                </div>

                <!-- 专家 -->
                <div class="p-4 bg-orange-50 rounded-lg border border-orange-200">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-900">专家</span>
                    <span class="text-xs text-gray-500">2000-4999分</span>
                  </div>
                  <p class="text-xs text-gray-600">高级功能</p>
                </div>

                <!-- 大师 -->
                <div class="p-4 bg-yellow-50 rounded-lg border border-yellow-200">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-900">大师</span>
                    <span class="text-xs text-gray-500">5000-9999分</span>
                  </div>
                  <p class="text-xs text-gray-600">高级功能</p>
                </div>

                <!-- 宗师 -->
                <div class="p-4 bg-red-50 rounded-lg border border-red-200">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-900">宗师</span>
                    <span class="text-xs text-gray-500">10000-19999分</span>
                  </div>
                  <p class="text-xs text-gray-600">专属客服</p>
                </div>

                <!-- 传说 -->
                <div class="p-4 bg-indigo-50 rounded-lg border border-indigo-200">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-900">传说</span>
                    <span class="text-xs text-gray-500">20000-49999分</span>
                  </div>
                  <p class="text-xs text-gray-600">专属客服</p>
                </div>

                <!-- 神话 -->
                <div class="p-4 bg-pink-50 rounded-lg border border-pink-200">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-900">神话</span>
                    <span class="text-xs text-gray-500">50000-99999分</span>
                  </div>
                  <p class="text-xs text-gray-600">专属客服</p>
                </div>

                <!-- 至尊 -->
                <div class="p-4 bg-gradient-to-r from-yellow-100 to-orange-100 rounded-lg border border-yellow-300">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-900">至尊</span>
                    <span class="text-xs text-gray-500">100000+分</span>
                  </div>
                  <p class="text-xs text-gray-600">至尊特权</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 积分排行榜 -->
          <div v-if="activeTab === 'leaderboard'">
            <div class="flex justify-between items-center mb-6">
              <h3 class="text-lg font-semibold text-gray-900">积分排行榜</h3>
              <div class="flex space-x-3">
                <select
                  v-model="leaderboardPeriod"
                  @change="loadLeaderboard"
                  class="bg-white/80 backdrop-blur-sm text-sm rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-yellow-500/30 border border-gray-200/50"
                >
                  <option value="all">总榜</option>
                  <option value="monthly">月榜</option>
                  <option value="weekly">周榜</option>
                  <option value="daily">日榜</option>
                </select>
                <button
                  @click="loadLeaderboard"
                  class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
                >
                  刷新
                </button>
              </div>
            </div>

            <!-- 加载状态 -->
            <div v-if="leaderboardLoading" class="flex justify-center items-center py-12">
              <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-yellow-500"></div>
              <span class="ml-3 text-gray-600">加载中...</span>
            </div>

            <!-- 排行榜列表 -->
            <div v-else-if="leaderboard.length > 0" class="space-y-4">
              <div
                v-for="(user, index) in leaderboard"
                :key="user.user_id"
                class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl hover:shadow-md transition-all duration-200"
              >
                <div class="flex items-center space-x-4">
                  <div
                    :class="[
                      'w-10 h-10 rounded-full flex items-center justify-center text-white font-bold',
                      index === 0 ? 'bg-gradient-to-r from-yellow-500 to-yellow-600' :
                      index === 1 ? 'bg-gradient-to-r from-gray-400 to-gray-500' :
                      index === 2 ? 'bg-gradient-to-r from-orange-500 to-orange-600' :
                      'bg-gradient-to-r from-blue-500 to-blue-600'
                    ]"
                  >
                    {{ user.rank }}
                  </div>
                  <div class="flex items-center space-x-3">
                    <img
                      :src="user.avatar_url || '/static/avatar/default.jpg'"
                      :alt="user.username"
                      class="w-10 h-10 rounded-full border-2 border-white shadow-sm"
                    />
                    <div>
                      <div class="font-semibold text-gray-900">{{ user.username }}</div>
                      <div class="text-sm text-gray-500">{{ user.level_name }}</div>
                    </div>
                  </div>
                </div>
                <div class="text-right">
                  <div class="text-lg font-bold text-yellow-600">{{ user.points }}</div>
                  <div class="text-sm text-gray-500">积分</div>
                </div>
              </div>
            </div>

            <!-- 空状态 -->
            <div v-else class="text-center py-12">
              <div class="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                </svg>
              </div>
              <h3 class="text-lg font-medium text-gray-900 mb-2">暂无排行榜数据</h3>
              <p class="text-gray-500">开始赚取积分来登上排行榜吧</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { pointsApi } from '@/api/points'

// 响应式数据
const activeTab = ref('history')
const historyLoading = ref(false)
const shopLoading = ref(false)
const rulesLoading = ref(false)
const leaderboardLoading = ref(false)

const userPoints = ref({
  total_points: 0,
  available_points: 0,
  used_points: 0,
  level: 1,
  level_name: '新手',
  next_level_points: 100
})

const userLevel = ref({
  level: 1,
  level_name: '新手',
  current_points: 0,
  next_level_points: 100,
  progress_percentage: 0,
  benefits: []
})

const pointsHistory = ref<any[]>([])
const redeemableItems = ref<any[]>([])
const pointsRules = ref<any[]>([])
const leaderboard = ref<any[]>([])

const historyFilter = ref('all')
const shopFilter = ref('all')
const leaderboardPeriod = ref('all')

// 标签页配置
const tabs = [
  { id: 'history', name: '积分记录' },
  { id: 'shop', name: '积分商城' },
  { id: 'rules', name: '积分规则' },
  { id: 'leaderboard', name: '排行榜' }
]

// 方法
const formatTime = (dateStr: string) => {
  const date = new Date(dateStr)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  if (diff < 1000 * 60) {
    return '刚刚'
  } else if (diff < 1000 * 60 * 60) {
    return `${Math.floor(diff / (1000 * 60))}分钟前`
  } else if (diff < 1000 * 60 * 60 * 24) {
    return `${Math.floor(diff / (1000 * 60 * 60))}小时前`
  } else {
    return `${Math.floor(diff / (1000 * 60 * 60 * 24))}天前`
  }
}

// 加载用户积分信息
const loadUserPoints = async () => {
  try {
    const response = await pointsApi.getUserPoints()
    if (response.data) {
      userPoints.value = response.data
    }
  } catch (error) {
    console.error('加载用户积分信息失败:', error)
  }
}

// 加载用户等级信息
const loadUserLevel = async () => {
  try {
    const response = await pointsApi.getUserLevel()
    if (response.data) {
      // 由于 userLevel.value 的类型 benefits 字段为 never[]，需要做类型断言或转换
      userLevel.value = {
        ...response.data,
        benefits: response.data.benefits || []
      } as typeof userLevel.value
    }
  } catch (error) {
    console.error('加载用户等级信息失败:', error)
  }
}

// 加载积分记录
const loadPointsHistory = async () => {
  try {
    historyLoading.value = true
    const response = await pointsApi.getPointsHistory({
      type: historyFilter.value !== 'all' ? historyFilter.value : undefined
    })
    if (response.data) {
      pointsHistory.value = response.data.data || []
    }
  } catch (error) {
    console.error('加载积分记录失败:', error)
  } finally {
    historyLoading.value = false
  }
}

// 加载可兑换商品
const loadRedeemableItems = async () => {
  try {
    shopLoading.value = true
    const response = await pointsApi.getRedeemableItems({
      category: shopFilter.value !== 'all' ? shopFilter.value : undefined
    })
    if (response.data) {
      redeemableItems.value = response.data.data || []
    }
  } catch (error) {
    console.error('加载可兑换商品失败:', error)
  } finally {
    shopLoading.value = false
  }
}

// 加载积分规则
const loadPointsRules = async () => {
  try {
    rulesLoading.value = true
    const response = await pointsApi.getPointsRules()
    if (response.data) {
      pointsRules.value = response.data
    }
  } catch (error) {
    console.error('加载积分规则失败:', error)
  } finally {
    rulesLoading.value = false
  }
}

// 加载排行榜
const loadLeaderboard = async () => {
  try {
    leaderboardLoading.value = true
    const response = await pointsApi.getPointsLeaderboard({
      period: leaderboardPeriod.value !== 'all' ? leaderboardPeriod.value as 'daily' | 'weekly' | 'monthly' : undefined
    })
    if (response.data) {
      leaderboard.value = response.data.data || []
    }
  } catch (error) {
    console.error('加载排行榜失败:', error)
  } finally {
    leaderboardLoading.value = false
  }
}

// 兑换商品
const redeemItem = async (item: any) => {
  if (!item.is_available || userPoints.value.available_points < item.points_cost) {
    return
  }
  
  if (confirm(`确定要兑换 ${item.name} 吗？将消耗 ${item.points_cost} 积分。`)) {
    try {
      const response = await pointsApi.redeemPoints({
        item_id: item.id,
        quantity: 1
      })
      
      if (response.data?.success) {
        alert('兑换成功！')
        // 重新加载数据
        await Promise.all([
          loadUserPoints(),
          loadRedeemableItems()
        ])
      } else {
        alert(response.data?.message || '兑换失败')
      }
    } catch (error) {
      console.error('兑换商品失败:', error)
      alert('兑换失败，请重试')
    }
  }
}

onMounted(async () => {
  await Promise.all([
    loadUserPoints(),
    loadUserLevel(),
    loadPointsHistory()
  ])
})
</script>

<style scoped>
.aspect-w-16 {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

.aspect-w-16 > * {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>
